<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script src="angular.1.2.29.js"></script>
<script src="ui-bootstrap-tpls.0.11.2.js"></script>
<script src="angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="tree-control.css">


	<div><!-- ng-app="example"-->

		<section id="classic" ><!--ng-controller="Classic"-->
			<div class="page-header">
				<h1>tree</h1>
			</div>
			<div class="row">
				<div class="col-md-6 show-grid">
					<div class="panel panel-default">
						<div class="panel-body">
							<div save-content="classic-html">
								<treecontrol class="tree-classic" tree-model="treedata" on-selection="showSelected(node)">
									label: {{node.label}} ({{node.id}})
								</treecontrol>
							</div>
						</div>
					</div>
				</div>

			</div>
			<script save-content="classic-js">
				function Classic($scope) {
					$scope.treedata = createSubTree(3, 4, "");
					$scope.showSelected = function(sel) {
						$scope.selectedNode = sel;
					};
				}
			</script>
		</section>
	</div>



<script>
	var example = angular.module("example", ["treeControl", "ui.bootstrap", "template/tabs/tab.html", "template/tabs/tabset.html"])
		.factory("$savedContent", function() {
			return [];
		})
		.directive("saveContent", function($savedContent) {
			return {
				restrict: "A",
				compile: function($element, $attrs) {
					var content = $element.html();
					$savedContent[$attrs.saveContent] = content;
				}
			}
		})
		.directive("applyContent", function($savedContent) {
			return {
				restrict: "EAC",
				compile: function($element, $attrs) {
					return function($scope, $element, $attrs) {
						var content = $savedContent[$attrs.applyContent];
						var lang = $attrs.highlightLang;
						if (lang == "html")
							content = escapeHtml(content);
						content = trimIndent(content);
						var pre = prettyPrintOne(content, lang);
						$element.html(pre);
					}
				}
			}
		})
		.directive("nav", function() {
			return {
				restrict: "A",
				compile: function($element) {
					var sections = $("section");
					angular.forEach(sections, function(section) {
						var $section = $(section);
						var id = $section.attr('id');
						var titleHtml = $section.find("h1").html();
						titleHtml = titleHtml.slice(0, titleHtml.indexOf("<")).trim();
						$element.append("<li><a href='#" + id + "'>" + titleHtml + "</a></li>")
					})
				}
			}
		});
	var names = ['Homer', 'Marge', 'Bart', 'Lisa', 'Mo'];

	function createSubTree(level, width, prefix) {
		if (level > 0) {
			var res = [];
			for (var i = 1; i <= width; i++)
				res.push({
					"label": "Node " + prefix + i,
					"id": "id" + prefix + i,
					"i": i,
					"children": createSubTree(level - 1, width, prefix + i + "."),
					"name": names[i % names.length]
				});
			return res;
		} else
			return [];
	}
</script>